<template>
  <div 
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
    v-if="visible"
    @click="handleClose"
  >
    <!-- 背景遮罩 -->
    <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300"></div>
    
    <!-- 对话框内容 -->
    <div 
      class="relative w-full max-w-2xl bg-white rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 scale-100"
      @click.stop
    >
      <!-- 对话框头部 -->
      <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-800">
          {{ isEditMode ? '编辑数据' : '新增数据' }}
        </h3>
        <button 
          class="text-gray-500 hover:text-gray-700 transition-colors"
          @click="handleClose"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 对话框内容区 -->
      <div class="p-6 max-h-[70vh] overflow-y-auto">
        <FormBuilder
          :form-title="isEditMode ? '编辑数据' : '新增数据'"
          :form-fields="fields"
          :initial-data="formData || {}"
          :submit-text="isEditMode ? '更新' : '创建'"
          @submit="handleSubmit"
          @cancel="handleClose"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import FormBuilder from './FormBuilder.vue'

const props = defineProps({
  // 是否显示对话框
  visible: {
    type: Boolean,
    default: false
  },
  // 表单数据（从FormData.vue传递）
  formData: {
    type: Object,
    default: () => ({})
  },
  // 表单类型（从FormData.vue传递）
  formType: {
    type: String,
    default: 'contact'
  }
})

const emit = defineEmits(['close', 'save'])

// 根据表单类型生成字段配置
const fields = computed(() => {
  // 基础字段
  const baseFields = [
    {
      name: 'name',
      label: '姓名',
      type: 'text',
      required: true,
      placeholder: '请输入姓名',
      rules: [{ required: '姓名为必填项' }, { maxLength: [50, '姓名最多50个字符'] }]
    },
    {
      name: 'email',
      label: '邮箱',
      type: 'email',
      required: true,
      placeholder: '请输入邮箱',
      rules: [
        { required: '邮箱为必填项' },
        { email: '请输入有效的邮箱地址' }
      ]
    },
    {
      name: 'phone',
      label: '电话',
      type: 'text',
      required: true,
      placeholder: '请输入电话号码',
      rules: [
        { required: '电话为必填项' },
        { pattern: [/^1[3-9]\d{9}$/, '请输入有效的手机号码'] }
      ]
    },
    {
      name: 'content',
      label: '内容',
      type: 'textarea',
      required: true,
      placeholder: '请输入内容',
      rows: 4,
      rules: [
        { required: '内容为必填项' },
        { maxLength: [500, '内容最多500个字符'] }
      ]
    },
    {
      name: 'status',
      label: '状态',
      type: 'select',
      required: true,
      options: [
        { label: '待处理', value: 'pending' },
        { label: '已处理', value: 'processed' }
      ]
    }
  ]

  return baseFields
})

// 计算是否为编辑模式
const isEditMode = computed(() => {
  return props.formData && props.formData.id !== null
})

// 处理表单提交
const handleSubmit = (formData) => {
  // 格式化提交的数据
  const submittedData = {
    ...formData,
    // 如果是新增，设置提交时间
    submittedAt: isEditMode.value ? props.formData.submittedAt : new Date().toISOString(),
    // 如果是新增，设置表单类型
    formType: isEditMode.value ? props.formData.formType : props.formType
  }
  
  emit('save', submittedData)
}

// 处理关闭对话框
const handleClose = () => {
  emit('close')
}
</script>
